<template>
  <div class="">
    <div v-if="publicInfo">
      <div>
        <span>name：</span>
        <span>{{ publicInfo.name }}</span>
        <div class="buttonNormal" @click="handleAdd('name')">name + 1</div>
      </div>
      <div>
        <span>age：</span>
        <span>{{ publicInfo.age }}</span>
        <div class="buttonNormal" @click="handleAdd('age')">age + 1</div>
      </div>
      <div>
        <span>tel：</span>
        <span>{{ publicInfo.tel }}</span>
        <div class="buttonNormal" @click="handleAdd('tel')">tel + 1</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mixin } from './mixin.js';
export default {
  props: {},
  mixins: [mixin],
  components: {},
  data() {
    return {};
  },
  created() {
    this.initDataFun(); // 初始化数据
  },
  mounted() {},
  beforeDestroy() {},
  watch: {},
  computed: {},
  methods: {
    // 初始化数据
    initDataFun() {
      console.log('child', this.publicInfo);
    },
    handleAdd(key) {
      this.publicInfo[key]++;
    },
  },
};
</script>

<style lang="less"></style>

<style lang="less" scoped>
.buttonNormal {
  margin: 12px 0;
  width: 120px;
}
</style>
